<template>
    <div>
        <van-row gutter="1">
        <van-col span="6" class="menu-left">
        <van-sidebar v-model="active" @change="onChange">
        <van-sidebar-item :title="item.name" v-for="(item, index) in categoryList" :key="index" 
       
        />
        <!-- <p class="text">{{ menubar.name }}</p> -->
        </van-sidebar>
        </van-col>
        <van-col span="18" class="menu-right">
        <div ref="rightCategoryDom">
        <div v-for="(item, index) in categoryList" :key="index"
        class="menu-right-item">
        <div style="font-weight: 600; font-size: 14px">{{ 
        item.name }}</div>
        <van-grid column-num="3">
        <van-grid-item v-for="(item2, index2) in item.sub" :key="index2">
            
        <router-link
:to="{ name: 'goodslist', params: { category_id: item2.id } }"
>
        <img :src="item2.image" alt="" style="width: 70x; 
        height: 70px" />
        <span style="font-size: 14px; color: #333">{{ item2.name }}</span>
    
    </router-link>
    
    </van-grid-item>
        </van-grid>
        </div>
        </div>
        </van-col>
        </van-row>
    </div>
</template>

<script setup>
    //引⼊category接⼝
import { category } from '@/api/login'
import { ref, onMounted, onUnmounted, watch,nextTick } from 'vue'

// import { createApp } from 'vue';
// import {createStore} from 'vuex';
//引入BScroll
import BScroll from 'better-scroll';
//2. 创建BScroll实例,第⼀个参数为需要滚动的html元素，第⼆个参数是BScroll的配置信息，如单击滚动、⿏标滚动、⿏标拖动实施⾃动滚动等
new BScroll ('.menu-right',{
    mouseWheel: true,
    click:true,
    probeType:3
})
//3. scrollTo()⽅法，⽅法参数有四个，scrollTo(x, y, time, easing)，x表示滚动到⽬标x位置，y表示滚动到⽬标y的位置，time为动画的执⾏时间，easing表示动画函数。如果是垂直滚动，scrollTo(0,-pos)
//4. better-scroll事件scroll事件,当⿏标发⽣滚动时，出发该事件。
// BScroll.on('scroll',()=>{})
// let rightCategoryDom=ref('')
// let scrollY = ref(0)
// let rightBscroll = null
// let topArr = [0]
//定义active响应式变量
// let active = ref(0)
//定义分类列表响应式变量
let active = ref(0)
const categoryList = ref('')
let rightCategoryDom = ref('')
let scrollY = ref(0)
let rightBscroll = null
let topArr = [0]
onMounted(async () => {
const res = await category()
categoryList.value = res.data
console.log(res.data)
let top = 0
await nextTick()
//增加⼀个底部的div，⾼度为100vh-最后⼀个⼆级分类的⾼度，这样既可以保证每个⼀级分类都可以正常滚动⼆级分类，有可以保证⼆级分类不会出现空⽩⻚出现
const div = document.createElement('div')
const length = rightCategoryDom.value.children.length
const height = rightCategoryDom.value.children[length -
1].clientHeight
div.style.height = `calc(100vh - ${height}px)`
rightCategoryDom.value.appendChild(div)
Array.from(rightCategoryDom.value.children).forEach((item) => {
top += item.clientHeight
topArr.push(top)
 })
//在onMounted中初始化BetterScroll
rightBscroll = new BScroll('.menu-right', {
mouseWheel: true,
click: true,
probeType: 3
 })
rightBscroll.on('scroll', (pos) => {
scrollY.value = Math.abs(pos.y)
const index = topArr.findIndex((top, i) => {
if (scrollY.value >= top && scrollY.value < topArr[i + 1]) {
return true
 }
 })
active.value = index
 })
})
onUnmounted(() => {
if (rightBscroll) {
rightBscroll.destroy()
 }
})
watch(active, () => {
if (rightBscroll) {
rightBscroll.refresh()
 }
})
const onChange = () => {
scrollY.value = topArr[active.value]
rightBscroll.scrollTo(0, -topArr[active.value])
}



// const categoryList = ref('')
onMounted(async () => {
//获取商品分类接⼝
const res = await category()
//对categroyList进⾏赋值
categoryList.value = res.data
console.log(res.data)
})
// const onChange = () => {
// console.log(categoryName.value)
// }
</script>

<style lang="scss" scoped>
.menu-left {
position: fixed;
overflow-y: auto;
}
.menu-right {
margin-left: 25%;
overflow-y: scroll;
height: calc(100vh - 96px);
}
</style>